<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app"></div>
</body>
<script>
  /**
   * 问题：
   * 什么是vue的响应式原理？
   * 
   * 答案：
   * 视图刷新的函数就是一个副作用函数，我们谈用户更改的属性值就是响应式属性
   * 当vue初始化时，会创建一个响应式属性和一个副作用函数
   * 当副作用函数执行时，响应式属性会收集到对应的依赖
   * 我们在交互时候修改响应式属性时，副作用函数会再次执行
  */


  // 用于获取watcher
  window.app = new Vue({ el: '#app'})

  // 每个组件都会生成一个Wather的实例
  const Watcher = app._watcher.constructor

  // -----------模拟初始化
  // 1.响应式属性
  const data = Vue.observable({  name: 1 })

  new Watcher(
    // 参数1：副作用函数中的this指向，作用域，且必须包含_wathchers
    {
      _watchers: [], 
    }, 
    // 参数2：副作用函数, 当响应式属性修改后，自动执行
    function() {
      document.getElementById('app').innerHTML = `${data.name}`
    },
  )

  // 模拟交互
  setInterval(()=> {
    data.name++ // 副作用函数的响应式属性修改，就会执行副作用函数
  }, 1000)
</script>
</html>
